@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&family=Great+Vibes&display=swap');


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Bitter", serif;
    font-optical-sizing: auto;
    font-style: normal;
    line-height: 40px;
    font-size: 16px;
    font-weight: 400;
    background-color: #ccc;
}

.text-title {
    font-family: "Great Vibes", cursive;
    font-weight: 400;
    font-style: normal;
}


.container {
    width: 1200px;
    margin: 0 auto;
}


.row {
    display: block;
}

.row::after {
    content: '';
    display: block;
    clear: both;
}

.card-content {
    padding: 40px;
    background-color: white;
    box-shadow: 2px 7px 20px 3px rgba(34, 60, 80, 0.19);
}
.card-content2 {
    padding: 90px;
    background-color: rgb(201, 228, 220);
    padding: 40px;
}
.pad {
margin-top: 20px;
margin-bottom: 20px;
}
.text-for-shapka {
    text-align: center;
    
}

.h100 {
    height: 100px;
}

.dark-blue {
    background-color: rgba(19, 50, 107, 0.673);
}

.light-brown {
    background-color: rgb(135, 192, 162);
}

.blue {
    background-color: rgba(137, 137, 196, 0.849);
}
.pu-style {
    background-color: rgba(119, 177, 138, 0.849);
}
 .leters {
     background-color: rgb(126, 101, 160);
 }
.dark-set {
    background-color: rgba(114, 144, 201, 0.673);
}
.white-set {
    height: 100px;
    background-color: rgba(114, 144, 201, 0.673);
    background-image: url(../img/333pror.jpeg);
    background-size: cover;
    background-position: center;
}
.ye-set {
    height: 210px;
    background-color: rgba(114, 144, 201, 0.673);
    background-image: url(../img/hty.png);
    background-size: cover;
    background-position: center;
}
.white{
    background-color: aliceblue;
}
.w100 {
    float: left;
    width:100%;
    padding:20px;
}

.w75 {
    float: left;
    width: 75%;
    padding: 20px;
}

.w50 {
    float: left;
    width: 50%;
    padding: 20px;
}

.w60 {
    float: left;
    width: 60%;
    padding: 20px;
}

.w40 {
    float: left;
    width: 40%;
    padding: 20px;
}

.w33 {
    float: left;
    width: 33.3333333%;
    padding: 20px;
}
.w30 {
    float: left;
    width: 30%;
    padding: 20px;
}
.w25 {
    float: left;
    width: 25%;
    padding: 20px;
}

p {
    margin-bottom: 10px;
}

.header {
    background-color: green;
    height: 80px;
}

.logo {
    height: 80px;
}

.site-menu {
    background-color: rgb(204, 204, 204);
    text-align: center;
    height: 60px;
    width: 100%;
}

.res-img {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
}


.menu {
    width: 100%;
    height: 80px;
    background-color: rgb(211, 163, 50);
    position: relative;
    z-index: 8;
}

.menu-link {
    line-height: 80px;
    color: white;
    text-decoration: none;
}

.menu-button-drop {
    display: inline-block;
    background-color: rgb(191, 218, 141);
    height: 80px;
    padding: 0 20px;
    
    position: relative;
    z-index: 10;
}

.drop-menu {
    width: 200px;
    height: 200px;
    background-color: rgb(141, 235, 219);

    position: absolute;
    left: 0;
    top: -280px;
    z-index: 5;
    transition: 0.5s;
}

.drop-menu-link {
    display: block;
    color: black;
    text-decoration: none;
    padding: 5px 20px;

}

.menu-button-drop:hover .drop-menu {
    top: 80px;
}

.card-title {
    font-size: 30px;
    margin-bottom: 20px;
}


.card-content {
    margin-bottom: 20px;
}

.button {
    display: inline-block;
    padding: 20px 40px;
    background-color: bisque;
    text-decoration: none;
    color: black;
}

/* Стили для шапки */

.shapka {
    width: 100%;
    height: 140px;
    background-color: rgb(178, 207, 173);
}

.logo-container {
    text-align: center;
}

.logo-img {
    height: 90px;
}

.text-center {
    text-align: center;
}

.menu-link {
    line-height: 100px;
}

.page-title {
    margin-top: 20px;
    font-size: 60px;
    font-weight: 500;
}

.page-description {
   margin-top: 40px; 
   font-size: 40px;
   font-weight: 350;
}


.scrooll {
    height: 200px;
    overflow-y: scroll;
}

.text-for-menu {
 line-height: 50px;
}

.br20 {
    border-radius: 20px;
}

.ike {
    font-family: "Pacifico", cursive;
  font-weight: 400;
  font-style: normal;
}
.rud {
    font-family: "Cormorant", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

#up-arrow {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 70px;
    height: 70px;
    background: #b2cfad;
    border-radius: 50%;
    display: none;
    text-align: center;
    box-shadow: 0px 3px 18px 5px rgba(180, 180, 180, 0.2);
}